<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/index.css">
    <title>Album</title>
</head>
<body>
    <div class="container">
        <div class="title"><span>相册系统</span></div>
        <div class="main">
            <div class="pic-upload">
                <input type="button" value="创建相册">
                
                <label for="myFile"> 上传图片
                <input type="file" name="myFile" accept="image/*" tabindex="999">
                </label>
            </div>

            <div class="pic selected" data-name="默认相册">
                <!-- <img src="p.jpg"> -->
            </div>        

            <nav>
                <span data-is-clicked="true">1</span> 
                <span data-is-clicked="false">2</span> 
                <span data-is-clicked="false">3</span> 
                <span data-is-clicked="false">4...</span> 
                <span data-is-clicked="false">末页</span> 
            </nav>
        </div>
        <div class="left">
            <div class="pic-collection">
                <a href="#">默认相册</a>
                <button name="默认相册">X</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../js/readfile.js"></script>
    <script type="text/javascript">
        // 创建相册事件
        const buttonDom = document.querySelector(".pic-upload>input[type=button]");
        
        buttonDom.onclick = function() {
            const albumName = prompt("请输入相册名字：", "");
            if (albumName) {
                const divDom = document.querySelector(".pic-collection");
                const picDom = document.querySelector(".selected");
                const index = divDom.parentNode.children.length;
                
                let newdiv = divDom.cloneNode(true);  // deep clone
                let adom = newdiv.querySelector("a");
                let buttondom = newdiv.querySelector("button");
                buttondom.name = albumName;
                adom.innerText = albumName;
                divDom.insertAdjacentElement("afterend", newdiv);

                let newpicdiv = picDom.cloneNode(false); // shallow clone
                picDom.classList.remove("selected");

                newpicdiv.dataset.name = albumName;
                picDom.insertAdjacentElement("afterend", newpicdiv);
            }
        }
    </script>
    <script type="text/javascript">
        // 点击相册事件(经查应该用事件委托对已经存在的父元素 委托事件)
        
        const leftdom = document.querySelector(".left");
        leftdom.addEventListener("click", function(event) {
            // <a></a> 被click
            if (event.target && event.target.nodeName.toUpperCase() === "A") {
                const adom = event.target;
                const name = adom.innerText;
                let pics = document.querySelectorAll(".pic");
                for (let pic of pics) {
                    // console.log(name);
                    // console.log("-------");
                    // console.log(pic.dataset.name);
                    if (pic.dataset.name === name) {
                        pic.classList.add("selected");
                    } else {
                        pic.classList.remove("selected");
                    }
                }
                
                // set the backgroundColor
                let adoms = leftdom.querySelectorAll("a");
                for (let x of adoms) {
                    if (x === adom) {
                        x.style.backgroundColor = "#aaa";
                        x.style.borderRadius = "4px";
                    }
                    else {
                        x.style.backgroundColor = leftdom.style.backgroundColor;
                        x.style.borderRadius = "0";
                    }
                }
            }
            
            // <button></button> 被click
            if (event.target.nodeName.toUpperCase() === "BUTTON") {
                let buttondom = event.target;
                let name = buttondom.name;
                if (name === "默认相册") {
                    return; 
                }

                // 删除这个相册索引
                let picCollectiondom = buttondom.parentNode;
                picCollectiondom.parentNode.removeChild(picCollectiondom);

                // 1.删除dataset.name = name 的div.pic 相册
                // 2.并且让上一个div.pic selected
                let picdoms = document.querySelectorAll("div.pic");
                for (let i = 0; i < picdoms.length; i++) {
                    if (picdoms[i].dataset.name === name) {
                        picdoms[i].parentNode.removeChild(picdoms[i]);   
                        picdoms[i - 1].classList.add("selected");
                        console.log(picdoms[i - 1]);
                        break;
                    }
                }
            }
        });
        // 错误代码 当前的文档树是固定的 不会有js新加入的节点

        // const picCollections = document.querySelectorAll(".pic-collection");
        // for (let picCollection of picCollections) {
        //     let adom = picCollection.querySelector("a");
        //     adom.addEventListener("click", function(event) {
        //         let name = adom.innerText;
        //         let pics = document.querySelectorAll(".pic");
        //         for (let pic of pics) {
        //             console.log(name);
        //             console.log("-------");
        //             console.log(pic.dataset.name);
        //             if (pic.dataset.name === name) {
        //                 pic.style.display = "block";
        //             } else {
        //                 pic.style.display = "none";
        //             }
        //         }
        //     });
        // }
        let mainDom = document.querySelector(".main");
        mainDom.addEventListener("click", function(event) {
            if (event.target && event.target.classList.contains("delete")) {
                let imgDiv = event.target.parentNode;
                imgDiv.parentNode.removeChild(imgDiv);
            }
        });
    </script>    
    <script type="text/javascript">
        const fileInputDom = document.querySelector("input[type=file]");

        const spandoms = document.querySelectorAll(".main>nav>span");
        
        for (let spandom of spandoms) {
            spandom.addEventListener("click", function(event) {
                const clickedSpanDom = document.querySelector(".main>nav>span[data-is-clicked=true]");
                clickedSpanDom.style.backgroundColor = "#fff";

                const curPageIndex = clickedSpanDom.innerText;
                let pageIndex = event.target.innerText;
                const parentNode = document.querySelector(".selected");
                const changePage = function(curPageIndex, pageIndex, parentNode) {
                    let list = parentNode.children;
                    let len = list.length;
                    let start,
                        end;
                    let total = 15;
                    // set none;
                    if (curPageIndex * 15 > len) {
                        end = len;
                    } else {
                        end = curPageIndex * 15;
                    }

                    for (let i = (curPageIndex - 1) * 15; i < end; i++) {
                            list[i].style.display = "none";
                    }

                    // set display
                    if ((pageIndex - 1) * 15 >= len) {
                        start = len;
                    } else {
                        start = (pageIndex - 1) * 15;
                    }

                    if (pageIndex * 15 > len) {
                        end = len;
                    } else {
                        end = pageIndex * 15;
                    }

                    for (let i = start; i < end; i++) {
                        list[i].style.display = "inline-block";
                    }
                };

                changePage(curPageIndex, pageIndex, parentNode);
                
                clickedSpanDom.dataset.isClicked = "false";
                event.target.dataset.isClicked = "true";
                event.target.style.backgroundColor = "#bbb";
                event.target.style.borderRadius = "4px";
            });
        }

        fileInputDom.addEventListener("change", createReader(addImg));
        
        function setImgSize(img, parentNode, pageIndex) {
            const total = 15;
            let tempStyle = img.style; 

            let len = parentNode.children.length;
            if (len >= (pageIndex - 1) * total && len < pageIndex * total) {
                tempStyle.display = "inline-block";
            } else {
                tempStyle.display = "none";    
            }
        }
        function addImg(img) {
            const parentNode = document.querySelector(".selected");
            const spandom = document.querySelector("nav>span[data-is-clicked=true]");            
            // set the img style
            setImgSize(img, parentNode, spandom.innerText);

            parentNode.appendChild(img);
        }
    </script>
</body>
</html>